<template>
  <div class="app-container">
    <el-card>
      <el-form :model="queryList" :inline="true" label-width="68px">
        <el-form-item label="图标名称">
          <el-input v-model="queryList.picClassName" placeholder="请输入图标名称" clearable style="width: 150px" />
        </el-form-item>
        <el-form-item label="图标编号">
          <el-input v-model="queryList.picTypeCode" placeholder="请输入图标编号" clearable style="width: 150px" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-plus" v-hasPermi="['basic:nccBasic:add']" @click="addDialog('add')">新增</el-button>
          <el-button type="primary" icon="el-icon-search" v-hasPermi="['basic:nccBasic:query']" @click="filterDire">查询</el-button>
          <el-button type="danger" icon="el-icon-refresh" @click="clearAll">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card>
      <el-table :data="picList" border height="605px">
        <el-table-column type="index" label="序号" align="center"> </el-table-column>
        <el-table-column prop="picClassCode" label="图片code" align="center"></el-table-column>
        <el-table-column prop="picClassName" label="图标名称" align="center"></el-table-column>
        <el-table-column prop="picTypeCode" label="图标类型" align="center"></el-table-column>
        <el-table-column prop="picPath" label="图标路径" align="center">
          <template slot-scope="scope">
            <ImagePreview :src="scope.row.picPath"  style="width: 50px;height: 50px;"/>
            <!--            <img :src="scope.row.picPath" alt="" style="width: 50px;height: 50px;">-->
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" align="center" :formatter="dateFormat"></el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="150">
          <template slot-scope="scope">
            <el-button size="mini" type="text" v-hasPermi="['basic:nccBasic:edit']" icon="el-icon-edit" @click="addDialog('edit', scope.row)">修改</el-button>
            <el-button size="mini" type="text" icon="el-icon-delete"
                       @click="deleteBtn(scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination background layout="total, prev, pager, next, sizes,jumper" @size-change="handleSizeChange"
                     @current-change="handleCurrentChange" :current-page="queryList.pageNum" :page-size="queryList.pageSize"
                     :page-sizes="[10, 20, 50, 100]" :total="total">
      </el-pagination>
    </el-card>
    <imageAdd ref="imageAddRef" :visible.sync="visible" @addSuccess="addSuccess" />
  </div>
</template>

<script>
import imageAdd from "@/components/BasicInformation/imageAdd.vue"
import {
  findBasicPicInfoList,
  picInfoDelete,//删除
} from '@/api/basic/PersonnelInformation.js'
export default {
  data() {
    return {
      queryList: {
        picClassName: '', //集团名称
        picTypeCode: '', //集团编号
      },
      picList: [], //el-table数据
      total: 0,
      visible: false,
    };
  },
  created() {
    this.getPicList();
  },
  components: {
    imageAdd
  },
  methods: {
    //删除
    deleteBtn(row) {
      this.$confirm(`确认要进行删除吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        picInfoDelete({id:row.picClassId}).then(res => {
          this.$message.success(res.msg);
          this.getPicList();
        })
      }).catch(()=>{
        this.$message.info('已取消');
      })
    },
    dateFormat(row, column, cellValue) {
      // 获取单元格数据
      let dtc = new Date(cellValue)
      //获取月,默认月份从0开始
      let dtuMonth = dtc.getMonth() + 1
      //获取日
      let dtuDay = dtc.getDate()
      //处理1-9月前面加0
      if (dtuMonth < 10) {
        dtuMonth = "0" + (dtc.getMonth() + 1)
      }
      //处理1-9天前面加0
      if (dtuDay < 10) {
        dtuDay = "0" + dtc.getDate()
      }
      //获取小时
      let dtuHours = dtc.getHours()
      //处理1-9时前面加0
      if (dtuHours < 10) {
        dtuHours = "0" + dtc.getHours()
      }
      //获取分钟
      let dtuMinutes = dtc.getMinutes()
      //处理1-9分前面加0
      if (dtuMinutes < 10) {
        dtuMinutes = "0" + dtc.getMinutes()
      }
      //获取秒
      let dtuSeconds = dtc.getSeconds()
      //处理1-9秒前面加0
      if (dtuSeconds < 10) {
        dtuSeconds = "0" + dtc.getSeconds()
      }
      //组装年月日时分秒,按自己的要求来
      return dtc.getFullYear() + "/" + dtuMonth + "/" + dtuDay
    },
    getPicList() {
      findBasicPicInfoList(this.queryList).then(response => {
        this.picList = response.rows;
        this.total = response.total;
      });
    },
    //新增/修改后刷新列表
    addSuccess() {
      this.getPicList();
    },
    clearAll() {
      this.queryList = {
        picClassName: "",
        picTypeCode: null,
      };
      this.getPicList();
    },
    filterDire() {
      this.getPicList()
    },

    addDialog(type, row) {
      this.visible = true;
      this.$refs.imageAddRef.openDialog(type, row);
    },
    handleSizeChange(newsize) {
      this.queryList.pageNum = 1
      this.queryList.pageSize = newsize
      this.getPicList()
    },
    handleCurrentChange(newpage) {
      this.queryList.pageNum = newpage
      this.getPicList()
    },
  }
};
</script>

<style scoped>
.app-container {
  padding: 20px;
}

.el-card {
  margin-bottom: 20px;
}

.btn el-button {
  margin-bottom: 20px;
}

.el-pagination {
  float: right;
  margin: 20px;
}
</style>
